<template>
  <el-popover
    v-model:visible="visible"
    placement="bottom-start"
    :width="430"
    trigger="click"
  >
    <template #reference>
      <div class="result">
        <div>{{ result }}</div>
        <el-icon :class="{ rotate: visible }">
          <ArrowDown />
        </el-icon>
      </div>
    </template>
    <div class="container">
      <el-row>
        <el-col :span="8">
          <el-radio-group v-model="radioValue" size="small">
            <el-radio-button value="按城市" label="按城市"></el-radio-button>
            <el-radio-button value="按省份" label="按省份"></el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :offset="1" :span="15">
          <el-select
            @change="changeSelect"
            placeholder="请搜索城市"
            size="small"
            v-model="selectValue"
            filterable
            :filter-method="filterMethod"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <template v-if="radioValue === '按城市'">
        <div class="city">
          <div
            class="city-item"
            @click="scrollToId(item)"
            v-for="(item, index) in Object.keys(cities)"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template v-for="(value, key) in cities" :key="key">
            <el-row style="margin-bottom: 10px" :id="key">
              <el-col :span="2">{{ key }}:</el-col>
              <el-col :span="22" class="city-name">
                <div
                  @click="clickItem(item)"
                  class="city-name-item"
                  v-for="item in value"
                  :key="item.id"
                >
                  <div>{{ item.name }}</div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-scrollbar>
      </template>
      <template v-else>
        <div class="province">
          <div
            class="province-item"
            v-for="(item, index) in Object.keys(provinces)"
            :key="index"
            @click="scrollToId(item)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template
            v-for="(item, index) in Object.values(provinces)"
            :key="index"
          >
            <template v-for="(item1, index1) in item" :key="index1">
              <el-row style="margin-bottom: 10px" :id="item1.id">
                <el-col :span="3">{{ item1.name }}:</el-col>
                <el-col :span="21" class="province-name">
                  <div
                    class="province-name-item"
                    v-for="(item2, index2) in item1.data"
                    :key="index2"
                  >
                    <div @click="clickProvince(item2)">{{ item2 }}</div>
                  </div>
                </el-col>
              </el-row>
            </template>
          </template>
        </el-scrollbar>
      </template>
    </div>
  </el-popover>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import city from '../lib/city'
import province from '../lib/province.json'

// Event emission
const emit = defineEmits(['changeCity', 'changeProvince'])

// Reactive variables
const result = ref('请选择')
const visible = ref(false)
const radioValue = ref('按城市')
const selectValue = ref('')
const options = ref([])
const cities = ref(city.cities)
const provinces = ref(province)
const allCity = ref([])

// Click handlers
const clickItem = (item) => {
  result.value = item.name
  visible.value = false
  emit('changeCity', item)
}

const clickProvince = (item) => {
  result.value = item
  visible.value = false
  emit('changeProvince', item)
}

const scrollToId = (id) => {
  const el = document.getElementById(id)
  if (el) el.scrollIntoView()
}

// Custom filter method for select dropdown
const filterMethod = (val) => {
  const values = Object.values(cities.value).flat(2)
  if (!val) {
    options.value = values
    return
  }

  options.value = values.filter((item) =>
    radioValue.value === '按城市'
      ? item.name.includes(val) || item.spell.includes(val)
      : item.name.includes(val),
  )
}

// Handle select change
const changeSelect = (val) => {
  const city = allCity.value.find((item) => item.id === val)
  result.value = city.name
  if (radioValue.value === '按城市') {
    emit('changeCity', city)
  } else {
    emit('changeProvince', city.name)
  }
}

// On mounted, set up data
onMounted(() => {
  const values = Object.values(cities.value).flat(2)
  allCity.value = values
  options.value = values
})
</script>

<style scoped>
/* Your styles here */
</style>

<style lang="scss" scoped>
.result {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}
.rotate {
  transform: rotate(180deg);
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
  margin-left: 4px;
  transition: all 0.25s linear;
}

.container {
  padding: 6px;
}
.city,
.province {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;
  &-item {
    padding: 3px 6px;
    margin-right: 8px;
    border: 1px solid #eee;
    margin-bottom: 8px;
    cursor: pointer;
  }
}
.city-name,
.province-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .city-name-item,
  .province-name-item {
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
  }
}
</style>
